<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="/css/bootstrap.css" />
    <script src="/js/jquery-3.4.1.js"></script>
    <script src="/js/vue.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.zhimg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.zhimg.com/element-ui/lib/index.js"></script>
    <script src="/js/bootstrap.js" type="text/javascript"></script>
    <!-- 网站图标 -->
    <link rel="icon" type="image/x-icon" href="/img/lscyzn_favicon.ico" >
    <link rel="shortcut icon" type="image/x-icon" href="/img/lscyzn_favicon.ico" >
</head>
<body>
<div id="app">
    <el-form :inline="true" :model="example" class="demo-form-inline">
        <el-form-item label="学员姓名">
            <el-input v-model="example.name" placeholder="请输入学员姓名" clearable  size="medium"></el-input>
        </el-form-item>
        <el-form-item label="学员统一编号">
            <el-input v-model="example.stunum" placeholder="请输入学员统一编号" clearable  size="medium"></el-input>
        </el-form-item>
        <el-form-item label="学员身份证号码">
            <el-input v-model="example.identnum" placeholder="请输入身份证号码" clearable  size="medium"></el-input>
        </el-form-item>
<!--        <el-form-item label="驾校ID">
            <el-input v-model="example.schoolid" placeholder="请输入驾校ID" clearable></el-input>
        </el-form-item>-->
        <el-autocomplete
                class="inline-input"
                v-model="example.schoolName"
                :fetch-suggestions="querySearch"
                placeholder="培训机构名称"
                size="medium"
                @select="handleSelect"
        >
            <template slot-scope="{ item }">
<!--                <div class="name">{{ item.address }}</div>-->
                <div class="name" style="color:green">{{ item.value = item.name }}</div>
            </template>
        </el-autocomplete>
<!--        <el-form-item label="驾驶类型ID">
            <el-input v-model="example.traintypeid" placeholder="请输入驾驶类型ID" clearable></el-input>
        </el-form-item>-->
        <el-date-picker
                v-model="example.time"
                type="daterange"
                :picker-options="pickerOptions"
                range-separator="至"
                start-placeholder="入学开始日期"
                end-placeholder="入学结束日期"
                value-format="yyyy-MM-dd"
                format="yyyy 年 MM 月 dd 日"
                size="medium"
                align="right">
        </el-date-picker>
        <el-form-item label="缴费情况">
            <el-select v-model="example.reserve2" placeholder="选择缴费情况" clearable  size="medium">
                <el-option label="未交" value="0"></el-option>
                <el-option label="已交" value="1"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="getData()">查询</el-button>
            <el-button type="primary" @click="updateStatusBatchByStuId()">批量操作</el-button>
        </el-form-item>
    </el-form>
    <template>
        <el-table
                ref="multipleTable"
                :data="tableData"
                style="width: 100%"
                highlight-current-row
                @selection-change="handleSelectionChange">
            <el-table-column
                    type="selection"
                    width="55">
            </el-table-column>
            <el-table-column
                    label="姓名"
                    width="180">
                <template slot-scope="scope">
                    <el-popover trigger="hover" placement="top">
                        <p>姓名: {{ scope.row.name }}</p>
                        <p>性别: {{ scope.row.sex==1?'男':'女' }}</p>
                        <p>身份证号码: {{ scope.row.identnum }}</p>
                        <p>统一编号: {{ scope.row.stunum }}</p>
                        <p>电话号码: {{ scope.row.telphone.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2') }}</p>
                        <div slot="reference" class="name-wrapper">
                            <el-tag size="medium">{{ scope.row.name }}</el-tag>
                        </div>
                    </el-popover>
                </template>
            </el-table-column>

            <el-table-column
                    label="入学日期"
                    width="180">
                <template slot-scope="scope">
                    <i class="el-icon-time"></i>
                    <span style="margin-left: 10px">{{ scope.row.singdate }}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="驾驶类型"
                    width="180">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.traintype.traintypename }}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="所属驾校"
                    width="180">
                <template slot-scope="scope">
                    <el-popover trigger="hover" placement="top">
                        <p>名称: {{ scope.row.school.name }}</p>
                        <p>地址: {{ scope.row.school.address }}</p>
                        <p>编号: {{ scope.row.school.inscode }}</p>
                        <div slot="reference" class="name-wrapper">
                            <el-tag size="medium">{{ scope.row.school.name }}</el-tag>
                        </div>
                    </el-popover>
                </template>
            </el-table-column>

            <el-table-column
                    label="理论缴费详情"
                    width="180">
                <template slot-scope="scope">
                    <el-tag
                            :type="scope.row.reserve2==1 ? 'success' : 'danger'"
                            disable-transitions>{{scope.row.reserve2==1?"已交":"未交"}}</el-tag>
<!--                    <span style="margin-left: 10px;color:#67C23A">{{ scope.row.reserve2==1?"已交":"未交" }}</span>-->
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button
                            type="warning"
                            size="small"
                            @click="handleEdit(scope.$index, scope.row)" round>修改</el-button>
<!--                    <el-button
                            size="mini"
                            type="danger"
                            @click="handleDelete(scope.$index, scope.row)">删除</el-button>-->
                </template>
            </el-table-column>
        </el-table>
    </template>
    <!--分页插件-->
    <template>
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[10, 20, 50]"
                :page-size="example.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="example.dataTotal">
        </el-pagination>
    </template>
</div>


<script>
    const app = new Vue({
        el: "#app",
        data: {
            studentids:[],
            schList:[],
            example:{
                schoolName:"",
                name:"",
                stunum:"",
                identnum:"",
                schoolid:"",
                traintypeid:"",
                time:[],
                startDate:null,
                endDate:null,
                reserve2:"",
                pageNum:1,
                pageSize:10,
                dataTotal:0
            },
            pickerOptions: {
                shortcuts: [{
                    text: '最近一周',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近一个月',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近三个月',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                        picker.$emit('pick', [start, end]);
                    }
                }]
            },
            tableData:[],
            input:"",
            currentPage:1
        },
        methods: {
            loadAll() {
                var $this = this;
                $.ajax({
                    url: "/school/querySchool",    //更改url
                    type: "get",
                    dataType:'json',
                    success:function(data){
                        if(data.code == "200"){
                            $this.schList = data.list;
                            $this.$message({
                                message: data.message,
                                duration:1000,
                                offset:40,
                                type: 'success'
                            });
                        }else {
                            $this.$message.error(data.message);
                        }
                    },
                    error:function (data) {
                        $this.$message.error("服务器异常");
                    }
                })
            },
            handleSelect(item) {
                //console.log(item);
                this.example.schoolid = item.schoolid;
                this.studentids.push(item.schoolid);
            },
            querySearch(queryString, cb) {
                var restaurants = this.schList;
                for(let i=0;i<restaurants.length;i++){
                    restaurants[i].value = restaurants[i].name;
                }
                var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
                // 调用 callback 返回建议列表的数据
                cb(results);
            },
            createFilter(queryString) {
                return (restaurant) => {
                    return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) !== -1);
                };
            },
            //控制条数
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
                this.example.pageSize=`${val}`
                this.getData();
            },
            //当前页
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
                this.example.pageNum=`${val}`;
                this.getData();
            },
            handleEdit(index, row) {
                var $this = this;
                row.reserve2 = row.reserve2==1?0:1;
                $.ajax({
                    url: "/student/updateStatusByStuId",    //更改url
                    type: "post",
                    data:{
                        "studentid":row.studentid,
                        "reserve2":row.reserve2
                    },
                    dataType:'json',
                    success:function(data){
                        if(data.code == "200"){
                            $this.$message({
                                message: data.message,
                                duration:1000,
                                offset:40,
                                type: 'success'
                            });
                            $this.getData();
                        }else {
                            $this.$message.error(data.message);
                        }

                    },
                    error:function (data) {
                        $this.$message.error("服务器异常");
                    }
                })

            },
            handleDelete(index, row) {
               // console.log(index, row);
            },
            updateStatusBatchByStuId() {
                console.log( this.studentids);
                var $this = this;
                $.ajax({
                    url: "/student/updateStatusBatchByStuId",    //更改url
                    type: "post",
                    data:{
                        "studentids":$this.studentids
                    },
                    traditional:true,
                    dataType:'json',
                    success:function(data){
                        if(data.code == "200"){
                            $this.$message({
                                message: data.message,
                                duration:1000,
                                offset:40,
                                type: 'success'
                            });
                            $this.getData();
                        }else {
                            $this.$message.error(data.message);
                        }
                    },
                    error:function (data) {
                        $this.$message.error("服务器异常");
                    }
                })

            },
            handleSelectionChange(val) {
               // this.$refs.multipleTable.toggleRowSelection(val);
                var arr =[];
                for (let i=0;i<val.length;i++) {
                    arr.push(val[i].studentid);
                }
                this.studentids = arr;
                console.log(this.studentids)
            },
            //获取后端数据
            getData(){
/*                //判断输入的驾校名称是否对应
                let flag = false
                for (let i = 0;i<this.schList.length;i++){
                    if(this.schList[i].schoolName == this.example.schoolName){
                        flag = true;
                    }
                }
                if(!flag){
                    this.$message.error('请输入正确的驾校名称');
                    return;
                }*/

                if(this.example.time == null){
                    this.example.startDate = null
                    this.example.endDate = null
                }
                if(this.example.time!=null && this.example.time.length>0){
                    console.log(this.example.time);
                    this.example.startDate = this.example.time[0]
                    this.example.endDate = this.example.time[1]
                }
                if(this.example.schoolName.length == 0 || this.example.schoolName==""){
                    this.example.schoolid = "";
                }
                console.log(this.example);
                var $this = this;
                $.ajax({
                    url: "/student/pageStudent",    //更改url
                    type: "get",
                    data:$this.example,
                    dataType:'json',
                    success:function(data){
                        if(data.code == "200"){
                            $this.tableData = data.obj.list;
                            $this.example.dataTotal = data.obj.total;
                            //console.log($this.tableData);
                            $this.$message({
                                message: data.message,
                                duration:1000,
                                offset:40,
                                type: 'success'
                            });
                        }else {
                            $this.$message.error(data.message);
                        }

                    },
                    error:function (data) {
                        $this.$message.error('服务器异常');
                    }
                })
            }
        },
        mounted() {
            this.loadAll();
        }
    });

</script>
</body>
</html>